<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>疫情数据查询</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md4">
                <div class="layui-btn-group" id="datepicker">
                    <button type="button" class="layui-btn">数据日期</button>
                    <input id="dataDate" type="button" class="layui-btn"></input>
                </div>
            </div>
        </div>
        <div class="layui-row" >
            <div class="layui-col-md12" style="background-color: #fff">
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th>省份</th>
                        <th>确诊人数</th>
                        <th>疑似人数</th>
                        <th>治愈人数</th>
                        <th>死亡人数</th>
                    </tr>
                    </thead>
                    <tbody id="tbody2">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/jquery/jquery-3.5.1.js}"></script>
<script th:inline="javascript">
    $(function () {
        layui.use(['laydate','laypage'], function(){
            var laydate = layui.laydate;//获得laydate模块
            //执行一个laydate实例
            laydate.render({
                elem: '#dataDate' //指定元素
                ,min: -7
                ,max: 0
                , ready: function (date) {
                    var y = date.year;
                    var m = date.month;
                    var d = date.date;
                    var nowDate = y + "-" + m + "-" + d;
                    getData(nowDate);
                },
                done: function (value, date, endDate) {
                    getData(value);
                }
            });
        });
        var fillToTable = function (epidemics) {
            var tbody2 = $("#tbody2");
            tbody2.empty();
            $.each(epidemics, function (index, epidemic) {
                var tr = $("<tr>");
                var td = $("<td>");
                td.text(epidemic.cityName);
                tr.append(td);
                td = $("<td>");
                td.html("" + epidemic.affirmedTotal);
                tr.append(td);

                td = $("<td>");
                td.html("" + epidemic.suspectedTotal);
                tr.append(td);

                td = $("<td>");
                td.html("" + epidemic.curedTotal);
                tr.append(td);

                td = $("<td>");
                td.html("" + epidemic.deadTotal);
                tr.append(td);

                tbody2.append(tr);
            });
        };
        //发送请求获取疫情数据
        function getData(date) {
            $.get([[${#request.getContextPath()}]]+"/epidemic-info/ajax/allEpidemic", {}, function (resp) {
                if (resp.code < 0) {
                    alert(resp.msg);
                } else {
                    fillToTable(resp.data);
                }
            }, "json");
        }
    });
</script>
</html>